<!-- 财富工作台 - 首页 -->
<template>
	<div class="app_detail" v-if="custInfo" v-show="pageStatus === 1">
		<div class="detail_cust">
			<div class="cust_left">
				<VanImage
					class="cust_avatar"
					:src="custInfo.avatar"
					:error-icon="require('@IMG/icon_cust_avatar.png')"
					:loading-icon="require('@IMG/icon_cust_avatar.png')"
				/>
				<i class="cust_certified"> 已认证 </i>
			</div>
			<div class="cust_right">
				<div class="cust_name" v-if="custInfo.name">
					{{ custInfo.name }}
				</div>
				<div
					class="cust_phone"
					v-if="custInfo.ethnicGroup || custInfo.phone"
				>
					<span
						v-if="custInfo.ethnicGroup"
						>{{ custInfo.ethnicGroup }}</span
					><span
						v-if="custInfo.phone && custInfo.isBelong === 1"
						>{{ custInfo.phone }}</span
					>
				</div>
				<div class="cust_bank">
					<span v-if="custInfo.gender">{{ custInfo.gender }}</span>
					<span
						v-if="custInfo.subBranch"
						>{{ custInfo.subBranch }}</span
					>
					<span v-if="custInfo.crmCustId"
						>客户编号 {{ custInfo.crmCustId }}</span
					>
				</div>
				<div class="cust_tags" v-if="custInfo.label.length">
					<div
						class="cust_tag"
						v-for="tag in custInfo.label.slice(0, 3)"
						:key="tag"
					>
						{{ tag }}
					</div>
				</div>
			</div>
		</div>
		<!-- 总资产&配置比例，该客户经理名下客户才可被查看 -->
		<template v-if="custInfo.isBelong === 1">
			<!-- 资产 -->
			<div class="detail_assets">
				<div class="detail_assets_inner">
					<span class="assets_label">总资产</span>
					<span class="assets_value"
						><span>{{ renderIntlNum(custInfo.totalAsset)
						}}</span
						><i class="assets_unit">元</i></span
					>
				</div>
				<div class="detail_todos">
					<div class="todo_item">
						<i>{{ custInfo.warnNums.dqMsg1 }}</i>
						<span>定期到期</span>
					</div>
					<div class="todo_item">
						<i>{{ custInfo.warnNums.dqMsg2 }}</i>
						<span>定期到期未承接</span>
					</div>
					<div class="todo_item">
						<i>{{ custInfo.warnNums.lcMsg1 }}</i>
						<span>理财到期</span>
					</div>
					<div class="todo_item">
						<i>{{ custInfo.warnNums.lcMsg2 }}</i>
						<span>理财到期未承接</span>
					</div>
				</div>
			</div>
			<!-- 配置比例 -->
			<div class="detail_option">
				<div class="option_title">
					<div class="title_inner">资产占比图</div>
					<div class="title_sub">客户当前配置比例如图</div>
				</div>
				<OptionEcharts :config="configData" v-if="configData" />
			</div>
		</template>
		<!-- 客户经理 -->
		<div class="detail_manager">
			<div class="manager_title">所属管户经理</div>
			<div class="manager_cont">
				<VanImage
					class="manager_avatar"
					:src="custInfo.custManagerAvatar"
					:error-icon="require('@IMG/icon_manager_avatar.png')"
					:loading-icon="require('@IMG/icon_manager_avatar.png')"
				/>
				<div class="manager_right">
					<div class="manager_name">
						{{ custInfo.custManagerName }}
					</div>
					<div class="manager_bank">
						<span
							v-if="custInfo.subBranch"
							>{{custInfo.subBranch}}</span
						>
						<span v-if="custInfo.custManagerPhone"
							>电话 {{custInfo.custManagerPhone}}</span
						>
					</div>
				</div>
			</div>
		</div>
		<!-- 重新认证 -->
		<div
			class="detail_recertify"
			v-if="custInfo.certified"
			@click="onJumpAuth"
		>
			<div class="recertify_btn">重新认证</div>
			<van-icon name="arrow" />
		</div>

		<!-- 入口页展示全部客户按钮 -->
		<StickyFixed show-shadow v-if="contactId">
			<VanButton
				class="btn_list"
				color="#ED3636"
				block
				@click="onJumpList"
				>全部客户</VanButton
			>
		</StickyFixed>
	</div>

	<EmptyLayout v-show="pageStatus === 2" description="服务异常" />
</template>

<script setup>
import { ref } from 'vue'
import StickyFixed from '@C/StickyFixed/StickyFixed'
import EmptyLayout from '@C/EmptyLayout/EmptyLayout'
import { closeToast, showLoadingToast } from 'vant'
import OptionEcharts from './plug/OptionEcharts'
import { parseJSON } from '@/utils'
import { renderIntlNum } from '@/utils/render'
import { GetCustDetail } from '@/api'

// 客户id
const custId = bjsdk.query('custId')
// 通过授权获取的客户id
const contactId = bjsdk.query('contactId')

// 跳转列表页
const onJumpList = () => bjsdk.goTo('/list')

// 跳转认证页面
const onJumpAuth = () => {
	bjsdk.goTo('/auth', {
		append: {
			[contactId ? 'contactId' : 'custId']: contactId || custId,
		},
	})
}

const pageStatus = ref(0) // 0:初始化 1:成功 2:失败
const configData = ref(null)
const custInfo = ref(null)
const getDetail = async () => {
	showLoadingToast()
	const contactUserId = custId || contactId
	const { data, code } = await GetCustDetail({ contactUserId }).catch(
		() => ({})
	)
	const isUnCertified = code === 1101 || data?.certified === 0
	// 未认证客户，跳转到认证页面
	if (isUnCertified && contactId) {
		bjsdk.goTo('/auth', {
			append: {
				contactId,
			},
			replace: true,
		})
		closeToast()
		return
	}
	// 异常
	if (!data) {
		pageStatus.value = 2
		closeToast()
		return
	}
	const assetAllocation = parseJSON(data.assetAllocation, {})
	custInfo.value = {
		...data,
		warnNums: parseJSON(data.warnNums, {}),
		label: data.label ? data.label.split('|') : [],
	}
	configData.value = [
		{ name: '活期存款', value: assetAllocation.dmdepBal },
		{ name: '定期存款', value: assetAllocation.tmdepBal },
		{ name: '理财余额', value: assetAllocation.chrtcBal },
		{ name: '股金余额', value: assetAllocation.shrAmtBal },
	]
	pageStatus.value = 1
	closeToast()
}
getDetail()
</script>

<style lang="less" scoped>
@import '~@CSS/share.less';
.app_detail {
	margin: 0 30px 20px;
	.detail_cust {
		display: flex;
		margin: 20px 0 0;
		padding: 30px;
		border-radius: 12px;
		background: #fff;
		.cust_left {
			position: relative;
			width: 92px;
			height: 92px;
			.cust_avatar {
				width: 92px;
				height: 92px;
				border-radius: 46px;
				overflow: hidden;
				--van-image-loading-icon-size: 92px;
				--van-image-error-icon-size: 92px;
			}
			.cust_certified {
				position: absolute;
				left: 2px;
				top: 68px;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 88px;
				height: 32px;
				border-radius: 16px;
				font-weight: 500;
				font-size: 19px;
				background: linear-gradient(166deg, #f6e6ce 0%, #f5d1b3 100%);
				color: #814223;
			}
		}
		.cust_right {
			flex: 1;
			margin: 0 0 0 24px;
			overflow: hidden;
			.cust_name {
				font-weight: 500;
				font-size: 32px;
				color: #333;
				line-height: 44px;
			}
			.cust_phone {
				margin: 10px 0 0;
				font-size: 26px;
				color: #666;
				line-height: 36px;
				span + span {
					margin: 0 0 0 16px;
				}
			}
			.cust_bank {
				margin: 10px 0 0;
				font-size: 22px;
				color: #999;
				line-height: 32px;
				span + span {
					&::before {
						content: ' | ';
					}
				}
			}
			.cust_tags {
				display: flex;
				flex-wrap: wrap;
				margin: 16px -12px 0 0;
				.cust_tag {
					border-radius: 4px;
					margin: 0 12px 6px 0;
					padding: 0 8px;
					height: 32px;
					line-height: 32px;
					color: #2b84de;
					border: 1px solid #2b84de;
					font-size: 22px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}
	}
	.detail_assets {
		margin: 20px 0 0;
		padding: 30px 30px;
		border-radius: 12px;
		background: #fff;
		.detail_assets_inner {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 10px 0 0;
			.assets_label {
				font-size: 26px;
				line-height: 36px;
				color: #999;
			}
			.assets_value {
				margin: 6px 0 0;
				font-weight: 500;
				font-size: 36px;
				line-height: 46px;
				color: #333;
			}
			.assets_unit {
				margin: 0 0 0 4px;
				font-style: normal;
				font-size: 24px;
				line-height: 34px;
				color: #999;
			}
		}
		.detail_todos {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 22px 0 0;
			height: 114px;
			padding: 0 24px;
			border-radius: 12px;
			background: #f9f9fa;
			.todo_item {
				display: flex;
				flex-direction: column;
				align-items: center;
				i {
					color: #333;
					line-height: 48px;
					font-weight: 500;
					font-size: 34px;
				}
				span {
					margin: 2px 0 0;
					font-size: 22px;
					color: #999;
					line-height: 32px;
				}
			}
		}
	}
	.detail_option {
		.half_border_b();
		&::before {
			left: 30px;
			right: 30px;
		}
		margin: 20px 0 0;
		padding: 30px 30px 0;
		border-radius: 12px 12px 0 0;
		background: #fff;
		.option_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title_inner {
				font-weight: 500;
				color: #333;
				font-size: 34px;
				line-height: 48px;
			}
			.title_sub {
				font-size: 24px;
				color: #999;
			}
		}
		& + .detail_manager {
			margin-top: 0;
			border-radius: 0 0 12px 12px;
		}
	}
	.detail_manager {
		margin: 20px 0;
		padding: 30px;
		border-radius: 12px;
		background: #fff;
		.manager_title {
			font-weight: 500;
			color: #333;
			font-size: 34px;
			line-height: 48px;
		}
		.manager_cont {
			display: flex;
			margin: 30px 0 0;
			.manager_avatar {
				.half_border_surround(8px, #F1F1F1);
				width: 92px;
				height: 92px;
				overflow: hidden;
				border-radius: 8px;
				--van-image-loading-icon-size: 92px;
				--van-image-error-icon-size: 92px;
			}
			.manager_right {
				flex: 1;
				margin: 0 0 0 24px;
			}
			.manager_name {
				font-size: 32px;
				font-weight: 500;
				line-height: 44px;
				color: #333;
			}
			.manager_bank {
				margin: 10px 0 0;
				font-size: 22px;
				line-height: 32px;
				color: #999;
				span + span {
					&::before {
						content: ' | ';
					}
				}
			}
		}
	}
	.detail_recertify {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20px 0 0;
		padding: 0 30px;
		height: 92px;
		border-radius: 12px;
		background: #fff;
		.recertify_btn {
			font-size: 30px;
			color: #333;
		}
		.van-icon {
			font-size: 36px;
			color: #cfd0d4;
		}
	}
	.btn_list {
		width: calc(100% - 60px);
		margin: 10px 30px;
		border-radius: 12px;
	}
}
</style>
